<%--
  Created by IntelliJ IDEA.
  User: Boss
  Date: 2021/5/13
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<style type="text/css">
    #update{
        display: none;
    }
    .btName{
        width: 80px;
        height: 38px;
        background-color: #009f95;
        border: #009f95;
        position: absolute;
        top: 0px;
    }

</style>
<body>
<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>违约数据</legend>
    </fieldset>
    <form action="<%=basePath%>BorrowServlet?opr=BeOverdue" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">读者卡号：</label>
            <div class="layui-input-inline">
                <input type="text" name="cardName"  placeholder="请输入..." autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"><input name="sb" type="submit" value="查询" class="btName"></div>
        </div>
    </form>
    <table class="layui-table" lay-even="" lay-skin="nob">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>编号</th>
            <th>读者卡号</th>
            <th>书籍编号</th>
            <th>借书时间</th>
            <th>约定天数</th>
            <th>归还时间</th>
            <th>违约类型</th>
            <th>违约金</th>
            <th>其它操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${byPage.list}" var="v">
            <tr>
                <td class="ide">${v.id}</td>
                <td>${v.cardId}</td>
                <td>${v.bookId}</td>
                <td>${v.startTime}</td>
                <td>${v.day}</td>
                <td>${v.endTime}</td>
                <td>${v.retype}</td>
                <td>${v.money}</td>
                <td><a href="#" class="update">修改</a>&nbsp;&nbsp;<a href="#" class="delete">删除</a></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<div id="update">
    <form method="post" action="<%=basePath%>BorrowServlet?opr=Update" class="mapping">
        <table border="1">
            <tr>
                <th colspan="2">违约修改</th>
            </tr>
            <tr>
                <th>编号：</th>
                <td><input type="text" name="id"></td>
            </tr>
            <tr>
                <th>读者卡号：</th>
                <td><input type="text" name="cardId"></td>
            </tr>
            <tr>
                <th>书籍编号：</th>
                <td><input type="text" name="bookId"></td>
            </tr>
            <tr>
                <th>借书时间：</th>
                <td><input type="text" name="startTime"></td>
            </tr>
            <tr>
                <th>约定天数：</th>
                <td><input type="text" name="day"></td>
            </tr>
            <tr>
                <th>归还时间：</th>
                <td><input type="text" name="endTime"></td>
            </tr>
            <tr>
                <th>违约类型：</th>
                <td><input type="text" name="retype"></td>
            </tr>
            <tr>
                <th>违约金：</th>
                <td><input type="text" name="money"></td>
            </tr>
            <tr>
                <td colspan="2"><input name="bt" type="button" value="修改" class="xiugai" style="margin-left: 50px">&nbsp;&nbsp;&nbsp;&nbsp;<input name="bt" type="button" class="quxiao" value="取消" style="margin-left: 50px"></td>
            </tr>
        </table>
    </form>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".update").click(function () {
            $("#update").show();
            let arr=new Array();
            $(this).parent().siblings().each(function () {
                arr.push($(this).text())
            })
            let i=0;
            $(".mapping").find("input:lt(8)").each(function () {
                $(this).val(arr[i])
                i++;
            })
            $(".xiugai").click(function () {
                let reid=$("input[name='id']").val();
                let reCardId=$("input[name='cardId']").val();
                let reBookId=$("input[name='bookId']").val();
                let reStartTime=$("input[name='startTime']").val();
                let reDay=$("input[name='day']").val();
                let reEndTime=$("input[name='endTime']").val();
                let Retype=$("input[name='retype']").val();
                let reMoney=$("input[name='money']").val();
                $.ajax({
                    url:"BorrowServlet?opr=Update",
                    type:"post",
                    data:{
                        id: reid,
                        cardId: reCardId,
                        bookId: reBookId,
                        startTime: reStartTime,
                        day: reDay,
                        endTime: reEndTime,
                        retype: Retype,
                        money: reMoney
                    },
                    dataType:"json",
                    success:function (date) {
                        if (date){
                            alert("修改成功！")
                        }else {
                            alert("修改失败！")
                        }
                    }
                })
            })
        })
        $(".delete").click(function () {
            let ReNameId=$(this).parent().parent().children("td:eq(0)").text();
            alert(ReNameId);
            $.ajax({
                url: "BorrowServlet?opr=Delete",
                type: "post",
                data: {
                    id: ReNameId
                },
                dateType: "json",
                success:function (date) {
                    if (date){
                        alert("删除成功！")
                        window.location.reload();
                    }else {
                        alert("删除失败！")
                    }
                }
            })
        })
        $(".quxiao").click(function () {
            $("#update").hide();
        })
    })
</script>
</body>
</html>
